<script setup>
// 导入logo图片
import logo from '@/assets/logo.png'
// 导入国际化
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// 导入图标
import { InfoFilled, ShoppingCartFull, Search } from '@element-plus/icons-vue'
// 引入组件
import MyLogin from '@/components/MyLogin.vue'
import MyRegister from './components/MyRegister.vue'
// vue 自带方法
import { ref, onMounted, computed, watchEffect } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import router from './router'

// 引入用户仓库
import { useUser } from '@/stores/index'
import { useShopcart } from '@/stores/index'
// 创建实例
const userStore = useUser()
const shopcartStore = useShopcart()

// 控制登录组件是否显示
const loginRef = ref(null)
const registerRef = ref(null)

// 是否显示登录按钮
const isShow = ref(true)
const username = ref('')

// 搜索框的内容
const searchText = ref('')

// 页面初次渲染成功时 进行用户是否登录验证
onMounted(() => {
  // 如果浏览器缓存中是否有user信息
  if (sessionStorage.getItem('user')) {
    // 说明缓存中已有用户信息不需要进行登录
    isShow.value = false
    userStore.setUser(JSON.parse(sessionStorage.getItem('user')).data)
    username.value = JSON.parse(sessionStorage.getItem('user')).data.username
  }
})

watchEffect(() => {
  // 加载购物车信息
  shopcartStore.loadShopcartList()
})

// 登录事件
const handleLogin = () => {
  // 开启登录组件
  loginRef.value = true
}

// 退出事件
const handleLogOut = () => {
  // 退出确认后吧缓存信息全部清空
  sessionStorage.removeItem('user')
  sessionStorage.removeItem('token')
  isShow.value = true
}

// 注册事件
const handleRegister = () => {
  registerRef.value = true
}

// 进入订单页
const handleOrder = () => {
  router.push('/order')
}

// 进入收藏页
const handleCollect = () => {
  router.push('/collect')
}

// 跳转购物车页面
const gotoShopcart = () => {
  router.push('/shopcart')
}

// 购物车商品数量
const shopcart_num = computed(() => {
  return shopcartStore.shopcartList.reduce((sum, prev) => sum + prev.num, 0)
})

// 登录组件传递过来的成功回调
const onSuccess = () => {
  // 关闭登录组件
  loginRef.value = false
  // 关闭注册组件
  registerRef.value = false
  //---------------------------------
  isShow.value = false
  username.value = JSON.parse(sessionStorage.getItem('user')).data.username
}
</script>

<template>
  <el-config-provider :locale="zhCn">
    <div class="app">
      <div class="top_header">
        <div class="content">
          <ul>
            <li v-if="isShow" @click="handleLogin">登录</li>

            <el-popconfirm
              width="220"
              confirm-button-text="OK"
              @confirm="handleLogOut"
              cancel-button-text="No"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="您确定要退出吗?"
            >
              <template #reference>
                <li v-if="!isShow">{{ username }}</li>
              </template>
            </el-popconfirm>
            <li>|</li>
            <li @click="handleRegister">注册</li>
            <li @click="handleOrder">我的订单</li>
            <li @click="handleCollect">我的收藏</li>
            <li @click="gotoShopcart" class="shopcart" :class="{ shopcart2: shopcart_num > 0 }">
              <el-icon>
                <ShoppingCartFull />
              </el-icon>
              <span>购物车({{ shopcart_num }})</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="common-layout">
        <el-container>
          <!-- 头部 -->
          <div class="nav">
            <div class="content">
              <div class="logo">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="logo"
                  fit="scale-down"
                ></el-image>
              </div>
              <div class="menu">
                <el-header height="80px">
                  <router-link to="/home">
                    <el-link type="primary">首页</el-link>
                  </router-link>
                  <router-link to="/goods">
                    <el-link type="primary">全部商品</el-link>
                  </router-link>
                  <router-link to="/about">
                    <el-link type="primary">关于我们</el-link>
                  </router-link>
                </el-header>
              </div>
              <div class="search">
                <el-input
                  v-model="searchText"
                  placeholder="请输入搜索内容"
                  class="input-with-select"
                >
                  <template #append>
                    <el-button :icon="Search" />
                  </template>
                </el-input>
              </div>
            </div>
          </div>
          <!-- 主体内容 -->
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- 底部 -->
          <el-footer>
            <div class="top">
              <a class="icon1" href="javascript:;">加盟电话</a>
              <a class="icon2" href="javascript:;">供应合作商</a>
              <a class="icon3" href="javascript:;">100%品质保证</a>
            </div>
            <div class="line"></div>
            <div class="bottom">
              <p>
                <a href="javascript:;">
                  <img src="./assets/gitee_preview_rev_1.png" />
                </a>
              </p>
              <p>
                <a href="javascript:;">首页</a>
                <span>|</span>
                <a href="javascript:;">全部商品</a>
                <span>|</span>
                <a href="javascript:;">关于我们</a>
              </p>
              <p>商城版权所有 © 2012-2023</p>
            </div>
          </el-footer>
        </el-container>
      </div>

      <!-- 插入登录组件 -->
      <MyLogin v-if="loginRef" @success="onSuccess"></MyLogin>
      <!-- 插入注册组件 -->
      <MyRegister v-if="registerRef" @success="onSuccess"></MyRegister>
    </div>
  </el-config-provider>
</template>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.app {
  font-size: 14px;
  width: 100%;
  .top_header {
    height: 40px;
    background-color: #3d3d3d;
    .content {
      width: 1226px;
      margin: 0 auto;
      color: #b0b0b0;
      display: flex;
      justify-content: flex-end;
      ul {
        display: flex;
        align-items: center;
        height: 40px;
        li {
          cursor: pointer;
          margin: 0 6px;
          &:hover {
            color: #fff;
          }
          &.shopcart {
            width: 120px;
            height: 40px;
            margin-left: 15px;
            background-color: #424242;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
              margin-left: 3px;
            }
            &:hover {
              color: #ff6700;
              background-color: #fff;
            }
          }
          &.shopcart2 {
            background-color: #ff6700;
            color: white;
            &:hover {
              background-color: #ff6700;
              color: white;
            }
          }
        }
      }
    }
    .login,
    .register {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  .nav {
    margin-top: 20px;
    background-color: whitesmoke;
    .content {
      width: 1226px;
      margin: 0 auto;
      border-bottom: 1px solid #b0b0b0;
      display: flex;
      align-items: center;
      .menu {
        flex: 1;
        margin-left: 100px;
        .el-menu--horizontal {
          border-bottom: none;
        }
      }
      .search {
        width: 300px;
      }
    }
  }
  .common-layout {
    width: 100%;
    margin: 0 auto;
    .el-header {
      a {
        padding: 20px;
      }
    }
  }
  .el-footer {
    background-color: #2f2f2f;
    height: 334px;
    .top {
      width: 1226px;
      height: 145px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      a {
        color: white;
        font-size: 20px;
        width: 200px;
        height: 40px;
        background: url(./assets/bg.png) no-repeat;
        padding-left: 45px;
        line-height: 40px;
        &.icon1 {
          background-position: 0 0;
        }
        &.icon2 {
          background-position: 0 -40px;
          margin: 0 150px;
        }
        &.icon3 {
          background-position: 0 -80px;
        }
      }
    }
    .line {
      border-bottom: 1px solid #3d3d3d;
    }
    .bottom {
      width: 1226px;
      margin: 0 auto;
      color: #888888;
      p {
        text-align: center;
        margin: 20px 0;
        a {
          color: #888888;
        }
        span {
          margin: 0 20px;
        }
      }
    }
  }
}
</style>
